<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>登录日志</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" th:href="@{/favicon.ico}">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/self/self-common.css}" rel="stylesheet">

    <link th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/bootstrap-select/bootstrap-select.css}" rel="stylesheet">

    <!--zTree-->
    <link th:href="@{/self/zTree/metroStyle.css}" rel="stylesheet" />
</head>

<body class="gray-bg">

<div class="ui-layout-west">
    <div class="box box-main">
        <div class="box-header">
            <div class="box-title">
                <i class="fa icon-grid"></i> 组织机构
            </div>
        </div>
        <div class="operation" style="margin: 10px 20px;">
            <button class="btn btn-success btn-xs" type="button">新增</button>
            <button class="btn btn-primary btn-xs" type="button">编辑</button>
            <button class="btn btn-danger btn-xs" type="button">删除</button>
        </div>
        <div class="ui-layout-content">
            <div id="tree" class="ztree"></div>
        </div>
    </div>
</div>

<div class="ui-layout-resizer ui-layout-resizer-open">
    <div class="ui-layout-toggler" title="折叠">
        <span class="ui-content content-open" style="display: block;"><i class="fa fa-caret-left"></i></span>
        <span class="ui-content content-closed" style="display: none;"><i class="fa fa-caret-right"></i></span>
    </div>
</div>

<div class="ui-layout-center">
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">

            <!--内页顶部状态切换查询-->
            <div class="btn-group switchTop">
                <button class="btn btn-default">所有</button>
                <button class="btn btn-default">未排</button>
                <button class="btn btn-default">已排</button>
                <button class="btn btn-default">进行中</button>
                <button class="btn btn-default">完成</button>
            </div>
            <!--内页顶部状态切换查询 end-->

            <div class="col-sm-12 search-card">
                <div class="ibox">
                    <div class="ibox-content">

                        <form class="form-inline">
                            <div class="form-group">
                                <div class="kssj">
                                    <input id="start" class="form-control layer-date" placeholder="创建时间(起)"
                                           autocomplete="off">
                                </div>
                            </div>
                            <div class="form-group">~</div>
                            <div class="form-group">
                                <div class="jssj">
                                    <input id="end" class="form-control layer-date" placeholder="创建时间(止)"
                                           autocomplete="off">
                                </div>
                            </div>

                            <div class="form-group">
                                <button id="btnSearch" class="btn btn-success" type="button">
                                    <i class="fa fa-search"></i>
                                    查询
                                </button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>

            <div class="col-sm-12 table-card">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>
                            <i class="fa fa-bookmark"></i>
                            登录日志
                        </h5>
                    </div>
                    <div class="ibox-content">
                        <div id="toolbar">
                        </div>
                        <table id="dataTable" data-mobile-responsive="true"></table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/content.js}"></script>
<script th:src="@{/js/app.js}" type="text/javascript"></script>

<!-- Bootstrap table -->
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<!--提示框-->
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<!--下拉选择框-->
<script th:src="@{/js/plugins/bootstrap-select/bootstrap-select.js}"></script>
<!--日期-->
<script th:src="@{/js/plugins/layer/laydate/laydate.js}"></script>

<!--bootstrap导出-->
<script th:src="@{/js/plugins/bootstrap-table-export/bootstrap-table-export.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table-export/tableExport.js}"></script>

<!--zTree-->
<script th:src="@{/self/zTree/jquery.ztree.all.min.js}"></script>

<script>
    var startTime = '';
    var endTime = '';
    $(document).ready(function () {

        function queryParams(params) {
            return {
                pageSize: params.pageSize,
                pageNumber: params.pageNumber,
                searchText: params.searchText === undefined ? "" : params.searchText,
                startTime: startTime,
                endTime: endTime,
            }
        }

        $('#dataTable')
            .bootstrapTable({
                url: baseUrl + "showLog",
                method: "post",
                queryParamsType: "",
                queryParams: queryParams,
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 10, //每页的记录行数（*）
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                search: false, //是否显示搜索框功能
                pagination: true, //是否分页
                showRefresh: true, //是否显示刷新功能
                showToggle: true,
                showColumns: true,
                // clickToSelect: true, //是否启用点击选中行
                // uniqueId: "indentId", //每一行的唯一标识，一般为主键列
                // idField: "indentId",
                formatSearch: function () {
                    return "登录日志";
                },
                iconSize: 'outline',
                sidePagination: "server", //服务端请求
                showExport: true,//显示导出按钮
                buttonsAlign: "right",  //按钮位置
                exportTypes: ['excel'],  //导出文件类型
                pageList: [10, 20, 30, 'all'],
                exportDataType: "basic",//导出类型 'basic':当前页, 'all', 'selected'.
                toolbar: '#toolbar', //工具按钮用哪个容器
                icons: {
                    refresh: 'glyphicon-repeat',
                    toggle: 'glyphicon-list-alt',
                    columns: 'glyphicon-list',
                    export: 'glyphicon-export'
                }
                , responseHandler: function (res) {
                    var rows = [];
                    if (res.total !== 0) {
                        rows = res.list;
                    }
                    var result = {
                        rows: rows,
                        total: res.total
                    };
                    return result;
                },
                onEditableSave: function (field, row, oldValue, $ele) {
                    //更新数据到数据库

                },
                columns: [{
                    width: 30,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    field: 'operateName',
                    title: '操作人'
                }, {
                    field: 'logComment',
                    title: '内容'
                }, {
                    field: 'createTime',
                    title: '创建时间'
                }]
            });

    });

    $("#btnSearch").click(function () {
        var start = $.trim($("#start").val());
        var end = $.trim($("#end").val());
        if (!start) {
            layer.msg("请选择开始时间");
            return;
        }
        if (!end) {
            layer.msg("请选择结束时间");
            return;
        }

        startTime = start;
        endTime = end + " 23:59:59";
        $("#dataTable").bootstrapTable('refresh');
    })


</script>

<!--zTree-->
<script>
    var settingss = {
        data: {
            simpleData: {
                enable: true, //true 、 false 分别表示 使用 、 不使用 简单数据模式
                idKey: "id", //节点数据中保存唯一标识的属性名称
                pIdKey: "pId", //节点数据中保存其父节点唯一标识的属性名称
                rootPId: -1 //用于修正根节点父节点数据，即 pIdKey 指定的属性值
            },
            key: {
                name: "name" //zTree 节点数据保存节点名称的属性名称  默认值："name"
            }
        },
        check: {
            enable: false, //true 、 false 分别表示 显示 、不显示 复选框或单选框
            nocheckInherit: true //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
        }
    };

    $(document).ready(function() {
        $.ajax({
            type: "get",
            url: "../self/aa.json",
            dataType: "json",
            // async: true,
            success: function(res) {
                console.log(res.menulists);

                zTreeObj = $.fn.zTree.init($("#tree"), settingss, res.menulists); //初始化树
                zTreeObj.expandAll(true); //true 节点全部展开、false节点收缩
            }
        });
    });
</script>

<script>
    //日期范围限制
    var start = {
        elem: '#start',
        format: 'YYYY-MM-DD',
        min: '2000-01-01', //设定最小日期为当前日期
        max: laydate.now(), //最大日期
        istime: false,
        istoday: true,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY-MM-DD',
        min: '2000-01-01',
        max: laydate.now(),
        istime: false,
        istoday: false,
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);
</script>

</body>

</html>
